<template>
  <jke-modal :visible.sync='jkeForm.visible' :width='1000' :title='jkeForm.title' :fullscreen.sync='jkeForm.fullscreen'
    :switchFullscreen='jkeForm.switchFullscreen'>
    <div class='body-table'>
      <a-table :scroll='{ x: scrollX }' :pagination='false' :columns='columns' :data-source='dataList'>
        <!-- 输入框搜索 -->
        <div slot="searchInput" slot-scope="{ selectedKeys, confirm, clearFilters, column }" class="searchWorkOreder">
          <a-input placeholder="请输入" v-model="filterForm[column.dataIndex]" style="width: 188px; display: block"
            @pressEnter="handleSearch" />
          <a-button type="primary" style="width: 80px; margin-left: 20px; display: block"
            @click="() => handleSearch(selectedKeys, confirm, column.dataIndex, clearFilters)">
            搜索
          </a-button>
        </div>
        <a-icon slot="searchIcon" slot-scope="filtered" type="search"
          :style="{ color: filtered ? '#108ee9' : undefined }" />
      </a-table>
      <!-- <div style='display: flex; margin: 20px 0; justify-content: space-between; align-items: center'>
        <div class='check-contain'>
          <span>
            {{ `共 ${total} 条` }}
          </span>
        </div>
        <div class='page-contain'>
          <a-pagination :total='total' v-model='current' :page-size-options='pageSizeOptions' :page-size='pageSize'
            @change='onChangePage' @showSizeChange='onShowSizeChange' show-quick-jumper show-size-changer />
        </div>
      </div> -->
    </div>
    <div style="margin: 20px 10px 0 10px ;display: flex;justify-content: flex-end;">
      <a-button @click="jkeForm.visible = false">取消</a-button>
    </div>
  </jke-modal>
</template>
<script>
import crumbs from '@/components/crumbs.vue'
import vueQr from 'vue-qr'
import moment from 'dayjs'
import FileDetail from '@/components/fileActions/FileDetail'
import { salaryApi } from '@/api/modiuesLX/pieceWage'
const columns = [
  {
    title: '关联工单',
    dataIndex: 'orderCode',
    key: 'orderCode',
    width: 170,
    scopedSlots: {
      filterDropdown: 'searchInput',
      filterIcon: 'searchIcon',
      customRender: 'orderCode'
    }
  },
  {
    title: '物品名称',
    dataIndex: 'goodsName',
    key: 'goodsName',
    width: 120,
    scopedSlots: {
      filterDropdown: 'searchInput',
      filterIcon: 'searchIcon',
      customRender: 'goodsName'
    }
  },
  {
    title: '工序',
    dataIndex: 'processName',
    key: 'processName',
    width: 120,
    scopedSlots: {
      filterDropdown: 'searchInput',
      filterIcon: 'searchIcon',
      customRender: 'processName'
    }
  },
  {
    title: '合格数 ',
    dataIndex: 'qualifiedNumStr',
    key: 'qualifiedNumStr',
    width: 120,
    ellipsis: true
  },
  {
    title: '不合格数',
    dataIndex: 'unqualifiedNumStr',
    key: 'unqualifiedNumStr',
    width: 120,
    ellipsis: true
  },
  {
    title: '计件单价',
    dataIndex: 'priceStr',
    key: 'priceStr',
    width: 120,
    ellipsis: true
  },
  {
    title: '计件工资',
    dataIndex: 'salaryStr',
    key: 'salaryStr',
    width: 120,
    ellipsis: true
  },
  {
    title: '生产人员',
    dataIndex: 'userName',
    key: 'userName',
    width: 120,
    ellipsis: true,
    scopedSlots: {
      filterDropdown: 'searchInput',
      filterIcon: 'searchIcon',
      customRender: 'processesName'
    }
  },
  {
    title: '报工时间',
    dataIndex: 'reportTime',
    key: 'reportTime',
    width: 180,
    ellipsis: true,

  },
  {
    title: '创建人',
    dataIndex: 'createBy',
    key: 'createBy',
    width: 120,
    ellipsis: true,
    scopedSlots: {
      filterDropdown: 'searchInput',
      filterIcon: 'searchIcon',
      customRender: 'createBy'
    }
  },
  {
    title: '更新人',
    dataIndex: 'updateBy',
    key: 'updateBy',
    width: 120,
    ellipsis: true,
    scopedSlots: {
      filterDropdown: 'searchInput',
      filterIcon: 'searchIcon',
      customRender: 'updateBy'
    }
  },

]

export default {
  props: {
    formData: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      filterForm: {},
      goodsNames: '',
      dataList: [],
      dataList1: [],
      columns,
      pageSizeOptions: ['10', '20', '30', '40', '50'],
      current: 1,
      total: 0,
      pageSize: 10,
      current1: 1,
      total1: 0,
      pageSize1: 10,
      jkeForm: {
        title: '计件工资详情',
        visible: false,
        fullscreen: false,
        switchFullscreen: false
      },
      orderCode: '',
      taskId: '',
      datilForm: {
        orderCode: '',
        processesCode: '',
        processesName: '',
        planStartTime: '',
        planEndTime: '',
        saleOrderCode: '',
        orderStatus: '',
        planNum: '',
        serialCode: '',
        serialName: '',
        serialSpecifications: ''
      },
      workOrderInfo: {
        reportNum: '',
        qualifiedNum: '',
        unqualifiedNum: '',
        dataSource: []
      },
      sortForm: {}
    }
  },
  components: {
    crumbs,
    FileDetail,
    vueQr
  },
  watch: {
    'jkeForm.visible': function (val) {
      if (!val) {
        this.$emit('cancel')
      }
    }
  },
  computed: {
    scrollX() {
      let xnum = 0
      for (let item of this.columns) {
        xnum += Number(item.width) || 0
      }
      return xnum
    }
  },
  mounted() {
    // this.jkeForm.visible = true
  },
  methods: {
    // 排序
    tableChange(pagination, filters, sorter, { currentDataSource }) {
      console.log('排序', sorter)
    },
    // 分页
    onChangePage(current, pageSize) {
      this.current = current
      this.pageSize = pageSize
      this.tablePage()
    },
    onShowSizeChange(current, pageSize) {
      this.current = current
      this.pageSize = pageSize
      this.tablePage()
    },
    initDetail(query) {
      console.log(query, '222')
      this.jkeForm.visible = true
      this.queryId = query.queryId
      this.tablePage(query)
    },
    handleSearch() {
      this.tablePage()
    },
    tablePage(query) {
      let param = {
        pageNo: this.current,
        pageSize: this.pageSize,
        ...this.filterForm,
      }
      if (query.queryType == 1) {
        param.userId = this.queryId
        delete param.orderId
        param.start = moment(this.formData.reportTime[0]).format('YYYY-MM-DD' + ' 00:00:00')
        param.end = moment(this.formData.reportTime[1]).format('YYYY-MM-DD' + ' 23:59:59')
      } else if (query.queryType == 2) {
        param.orderId = this.queryId
        delete param.userId
        delete param.start
        delete param.end
      }
      console.log(param)
      salaryApi.salaryDetailList(param).then((res) => {
        if (res.code == 200) {
          this.dataList = res.result
          this.total = res.total
        } else {
          this.$antdMessage.warning(res.message)
        }
      })
    }
  }
}
</script>
<style scoped lang='less'>
@import '~@/assets/less/public.less';

.box {
  display: flex;
  align-items: center;
  width: 100%;
  height: 206px;

  .box-column {
    flex: 1;
    height: 100%;

    .boeay {
      margin: 20px 0;
    }
  }
}

// ==============
.uni-card {
  padding: 24px 40px;
  margin: -12px -12px 0;
  background: #fff;
}

.item-wrap1 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  position: relative;
}

.detail-item {
  width: 30%;
}

/* 副标题 */
.subtitle {
  font-size: 14px;
  color: #191f25;
}

/* 详情内容/次要文字 */
.secondary-text {
  font-size: 14px;
  color: #888888;
  word-break: break-all;
}

// ========================

.body-box {
  background: #f6f6f6;

  .num {
    display: flex;
    background: white;

    .box-num {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      height: 206px;
      border-right: 1px solid #e8e8e8;

      &:last-child {
        border-right: none;
      }

      .topnum {
        font-size: 16px;
        font-weight: bold;
      }

      .bomnum {
        margin-top: 15px;
        font-size: 24px;
      }
    }
  }

  .body-table {
    background: white;
    margin-top: 10px;
  }
}

.parion {
  padding: 15px 12px 6px 43px;
  text-align: right;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.subtitle {
  min-width: 200px;
}

.flex(@jc, @ai, @fd: row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}

.searchWorkOreder {
  .flex(flex-start, center);
  padding: 8px;
}

/deep/ .ant-modal-body {
  max-height: 80vh !important;
  min-height: 40vh;
  overflow: auto;

}
</style>
